<template>
	<view class="container">
		<view class="pay-heared"></view>
		<view class="pay-info">
			<view class="pay-price">
				￥<text>{{(orderInfo.sell_price * orderInfo.num).toFixed(2)}}</text>
			</view>
			<view class="pay-info-item">
				<view class="hd">
					产品名称：
				</view>
				<view class="bd" v-if="orderInfo.product_name">
					{{orderInfo.product_name}}
				</view>
			</view>			
			<view class="pay-info-item">
				<view class="hd">
					订单号：
				</view>
				<view class="bd">
					{{orderInfo.order_sn}}
				</view>
			</view>
			<view class="pay-info-item">
				<view class="hd">
					支付时间：
				</view>
				<view class="bd">
					{{get_date_format(orderInfo.paytime)}}
				</view>
			</view>
		</view>	
		<!-- 底部操作按钮 -->
		<footer-fixed-bar :isShadow="false" :isBackground="false">
			<view class="footer-btn-con">
				<view class="footer-alone-btn-default" @click="toIndexPage">
					<view class="text">返回首页</view>
				</view>
				<view class="footer-alone-btn-default" @click="toOrderDetail">
					<view class="text">查看订单</view>
				</view>
			</view>
		</footer-fixed-bar>
	</view>
</template>

<script>
	import {apiUrl} from '@/api/base.js'
	import {
		get_date_format
	} from '@/utils/utils.js'
	import footerFixedBar from "@/components/footer-fixed-bar.vue";	
	export default {
		components: {
			footerFixedBar
		},
		data() {
			return {
				orderInfo:{},				
			}
		},
		onLoad(options) {
			if (options.order_sn) {
				uni.request({
					url: apiUrl + "addons/car/order/getOrder",
					data: {
						order_sn:options.order_sn
					},
					method: "GET",
					success: (res) => {
						this.orderInfo=res.data.data
					},
					fail: (res) => {
						console.log(res)
					}
				})
			}
		},
		methods: {	
			toIndexPage(){
				uni.reLaunch({
				    url: '/pages/index/index'
				});
			},
			toOrderDetail(){
				uni.navigateTo({
				    url: '/pages/orders/detail?order_sn='+this.orderInfo.order_sn
				});
			},
			// 获取日期
			get_date_format(time) {
				return get_date_format(time,"yyyy年MM月dd号 hh:mm:ss");
			}
		}
	}
</script>

<style lang="scss">
	.container {
		position: relative;
	}

	.pay-heared {
		height: 100rpx;
		padding: 50rpx 24rpx 50rpx;
		background: url(https://xcx.zhilvhulian.com/res/static/images/pay_sucsses_bg.jpg) center no-repeat;
		background-size: cover;

		.pay-tips {
			font-size: $uni-font-size-sm;
			color: $uni-text-color-inverse;
			margin-bottom: $uni-spacing-col-sm;
		}

		.pay-dis {
			font-size: 32rpx;
			color: $uni-text-color-inverse;

			text {
				color: #fff100;
			}
		}
	}

	.pay-info {
		margin: 0 26rpx;
		background: $uni-bg-color;
		padding: 12rpx $uni-spacing-row-sm $uni-spacing-row-sm;
		position: relative;
		display: block;

		.pay-price {
			text-align: center;
			font-size: $uni-font-size-base;
			padding-bottom: 24rpx;
			position: relative;
			margin-bottom: 16rpx;

			&::after {
				content: '';
				display: block;
				width: 100%;
				border-bottom: 2rpx dashed $uni-border-color;
				transform: scale(1, 0.5);
				background: $uni-border-color;
				position: absolute;
				bottom: 0;
			}

			text {
				font-size: 44rpx;
			}
		}

		.pay-info-item {
			display: flex;
			font-size: $uni-font-size-base;
			padding: 16rpx 0;

			.hd {
				color: $uni-text-color-grey;
				width: 144rpx;
				flex: 0 0 auto;
			}

			.bd {
				color: $uni-text-color;
				word-break: break-all;
				flex: 1 1 auto;
			}
		}
	}

	.red_bag {
		background: url(~@/static/redbag_bg_pay.png) center no-repeat;
		background-size: contain;
		height: 180rpx;
		margin: 90rpx 26rpx 0;
		text-align: center;
		line-height: 212rpx;
		font-size: 44rpx;
		text{
			background-image: linear-gradient(to bottom, rgb(255,255, 255), rgb(255,255, 255), rgb(244, 106, 98));
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			font-weight: bold;
			font-style: italic;
			margin-left: 24rpx;
		}
	}

	// 底部按钮
	.footer-btn-con {
		display: flex;
		justify-content: space-between;

		.footer-alone-btn-default {
			text-align: center;
			padding: 0 12rpx 22rpx 25rpx;
			width: 50%;
			background: $uni-bg-color-grey;

			.text {
				background: $uni-bg-color-primary;
				padding: 30rpx 0;
				color: $uni-text-color-inverse;
				border-radius: $uni-border-radius-lg;
				font-size: $uni-font-size-lg;
			}
		}
	}
</style>
